<template>
    <div class="gaodeMapContainer" id="gaodeMapContainer" ref="viewer">
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import {mapConfig} from '/src/config/mapConfig'
    import {store} from '/src/store'

    export default {
        name: "gaodeMap",
        mounted() {
            this.initMap()
        },
        methods: {
            //初始化高德地图
            initMap() {
                window._AMapSecurityConfig = {
                    securityJsCode: '5a8061a3ecdfa3d5281643d8aaf2bbac',
                };
                AMapLoader.load({
                    "key": "de35340489c9dac2d499cb5a24ef259e",              // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then(AMap => {
                    var indoorMap = new AMap.IndoorMap({hideFloorBar: true, alwaysShow: true});
                    indoorMap.showFloorBar()
                    let gaodeMap = new AMap.Map('gaodeMapContainer', {
                        rotateEnable: true,
                        pitchEnable: true,
                        viewMode: '3D', //开启3D视图,默认为关闭
                        zooms: [2, 20],
                        isHotspot: true,
                        showIndoorMap: false, //隐藏地图自带的室内地图图层
                        layers: [indoorMap, AMap.createDefaultLayer()]
                    });
                    const mapRange = store.getters.mapRange
                    if (mapRange && Object.keys(mapRange).length > 0) {
                        gaodeMap.setCenter([mapRange.longitude, mapRange.latitude])
                        gaodeMap.setZoom(mapRange.zoom)
                        gaodeMap.setPitch(parseFloat(mapRange.pitch) + 90)
                        gaodeMap.setRotation(360 - parseFloat(mapRange.heading))
                    } else {
                        gaodeMap.setCenter([mapConfig.initLng, mapConfig.initLat])
                        gaodeMap.setZoom(mapConfig.initZoom)
                        gaodeMap.setPitch(mapConfig.initPitch)
                        gaodeMap.setRotation(mapConfig.initHeading)
                    }
                    gaodeMap.on("complete", function () {
                        console.log("地图加载完成！");
                        store.commit('SET_GAODE_MAP_STATUS', true)
                    });
                    //赋予全局
                    window.AMap = AMap
                    window.gaodeMap = gaodeMap
                }).catch(e => {
                    console.log(e);
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "/src/style/layout.scss";

    .gaodeMapContainer {
        position: relative;
        height: calc(100vh - $headerHeight - 20px);
    }
</style>
